<%@ page pageEncoding="UTF-8"%>
<%@ include file="../common/header.jsp"%>
<!-- 新增表单  -->
<div id="form-window-add" style="padding: 15px">
	<form id="form-data-add" action="${ctx}/category?opt=doAdd" method="post">
		<div class="form-group">
			<label>类目名称</label> <input type="text" class="form-control" name="name">
		</div>
		<div class="form-group" id="div-param">
			<label>类目参数</label> 
			<button type="button" class="btn btn-primary item-param-add-group item-param-add-tt">添加分组</button>
            <input id="paramData" name="paramData" type="hidden" value='${itemCatParam.paramData}'>
		</div>
		<div class="form-group">
			<label>类目图片</label>
			<jsp:include page="../common/file_upload_v1.jsp"></jsp:include>
		</div>
		<div class="form-group pull-right">
		    <input id="btn-add-do" type="submit" class="btn btn-primary btn-do" value="保存">
		    <input  type="type" class="btn btn-primary  btn-save-group" value="保存2">
		   
			<input type="button" class="btn btn-default btn-close" value="关闭" onclick="parent.layer.closeAll();">
		</div>
	</form>
</div>

<div class="item-param-template-group" style="display: none;">
    <div>
        <div class="form-group">
            <div class="row">
                <div class="col-sm-10">
                    <input id="title" type="text" class="form-control required item-param-group-input" placeholder="请输入组名">
                </div>
                <div class="col-sm-1">
                    <button type="button" class="btn btn-sm btn-primary item-param-add-param">添加参数</button>
                </div>
                <div class="col-sm-1">
                    <button type="button" class="btn btn-sm btn-primary item-param-delete-group">删除</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="item-param-template-param" style="display: none;">
    <div class="form-group">
        <div class="row">
            <div class="col-sm-9 col-sm-offset-1">
                <input type="text" class="form-control required item-param-input" placeholder="请输入参数">
            </div>
            <div class="col-sm-1"></div>
            <div class="col-sm-1">
                <button type="button" class="btn btn-sm btn-primary item-param-delete-param">删除</button>
            </div>
        </div>
    </div>
</div>
<script>
//新增
$('#form-data-add').bootstrapValidator({
	fields : {
		name : {
			validators : {
				notEmpty : {
					message : '类目名称不能为空'
				}
			}
		},
		param : {
			validators : {
				notEmpty : {
					message : '类目参数不能为空'
				}
			}
		}
	}
}).on('success.form.bv', function(e) {//点击提交之后
	//阻止表单提交的默认事件
	e.preventDefault();
	//获取表单
	var $form = $(e.target);
	//异步提交表单
	$form.ajaxSubmit(function(result) {
		//将字符串转换为json对象
		var data = JSON.parse(result);
		if (data.status == 0) {
			layer.alert(data.msg, function(index) {
				//刷新列表的内容
				$('.load-data').click();
				layer.closeAll();
			});
		} else {
			layer.alert(data.msg);
			$('.btn-do').removeAttr("disabled");
		}
	});
});
</script>

<script>
    var i = 0;
    var j = 0;
    $(document).ready(function () {
        var paramDate = $("#paramData").val();
        //------ 解析商品分类规格参数的json字符串，展示为html元素开始
        if (paramDate) {
            var $paramData = JSON.parse(paramDate);
            for(var m in $paramData){
                var data = $paramData[m];
                i++;
                var temple = $(".item-param-template-group div").eq(0).clone();
                temple.addClass("item-param-group");
                temple.find(".item-param-group-input").attr("name", "group" + i).val(data.group);
                $("#paramData").before(temple);
                for(var n in data.params){
                   // alert(data.params[n]);
                    j++;
                    var param = $(".item-param-template-param div").eq(0).clone();
                    temple.append(param);

                    param.find(".item-param-input").attr("name", "param" + j).val(data.params[n]);
                    param.find(".item-param-delete-param").click(function () {
                        j--;
                        $(this).parent().parent().parent().remove();
                    });
                }
                temple.find(".item-param-delete-group").click(function () {
                    i--;
                    $(this).parent().parent().parent().parent().remove();
                });
                temple.find(".item-param-add-param").click(function () {
                    j++;
                    var param = $(".item-param-template-param div").eq(0).clone();
                    $(this).parent().parent().parent().parent().append(param);
                    param.find(".item-param-input").attr("name", "param" + j);
                    param.find(".item-param-delete-param").click(function () {
                        j--;
                        $(this).parent().parent().parent().remove();
                    });
                });
            }
        }
        //----------解析商品分类规格参数的json字符串，展示为html元素结束
        $(".item-param-add-group").click(function () {

            i++;
            var temple = $(".item-param-template-group div").eq(0).clone();
            temple.addClass("item-param-group");
            temple.find(".item-param-group-input").attr("name", "group" + i);
            $("#paramData").before(temple);
            temple.find(".item-param-delete-group").click(function () {
                i--;
                $(this).parent().parent().parent().parent().remove();
            });
            temple.find(".item-param-add-param").click(function () {
                j++;
                var param = $(".item-param-template-param div").eq(0).clone();
                $(this).parent().parent().parent().parent().append(param);
                param.find(".item-param-input").attr("name", "param" + j);
                param.find(".item-param-delete-param").click(function () {
                    j--;
                    $(this).parent().parent().parent().remove();
                });
            });
        });

        $(".btn-save-group").click(function () {
        	//收集表单数据转为json
            var group_params = [];
            $("#div-param").find(".item-param-group-input").each(function () {
                var group = $.trim($(this).val());
                //alert(group);
                var params = [];
                $(this).parent().parent().parent().parent().find(".item-param-input").each(function () {
                    var param = $.trim($(this).val());
                    //alert(param);
                    params.push(param);
                });
                group_params.push({
                    "group": group,
                    "params": params
                });
            });
            //将表单中收集到的规格参数数据转换成json字符串以后设置到隐藏表单#paramData，这样就可以将数据提交到后台了
            alert(JSON.stringify(group_params));
            $("#div-param").find("#paramData").val(JSON.stringify(group_params));
        });
    });
</script>
<%@ include file="../common/footer.jsp"%>			